<template>
	<div class="all">
		<!-- 项目信息 -->
		<div class="leftaaa">
			<div class="leftTop">
				<div class="title">
					<span class="word">项目信息</span>
				</div>
				<div class="line"></div>
				<div class="Onecontant">
					<div class="oneMiddle">
						<el-row>
							<el-col :span="12">
								<ul class="info">
									<li v-if="state.d.address">项目地址：{{ state.d.address }}</li>
									<li v-if="state.d.area">建筑面积：{{ state.d.area }}m²</li>
									<li v-if="state.d.up">地上：{{ state.d.up }}</li>
									<li v-if="state.d.down">地下：{{ state.d.down }}</li>
									<li v-if="state.d.office">办公：{{ state.d.office }}</li>
									<li v-if="state.d.shop">商城：{{ state.d.shop }}</li>
									<li v-if="state.d.home">公寓：{{ state.d.home }}</li>
									<li v-if="state.d.garage">车库：{{ state.d.garage }}</li>
									<li v-if="state.d.hotel">酒店：{{ state.d.hotel }}</li>
									<li v-if="state.d.level">星级：{{ state.d.level }}</li>
									
									<li style="width: 100%;" v-if="state.d.time">竣工日期：{{ state.d.time }}</li>
									<li v-if="state.admin.cost">投入成本：{{ state.admin.cost }}</li>
									<li v-if="state.admin.start">OAO系统开始运作日期：{{ state.admin.start }}</li>
								</ul>
							</el-col>
							<el-col :span="12">
								<img
								style="width:100px; height:100px"
									:src="`http://oao.zhichengshangxin.com/${state.d.img}`"
									alt=""
								/>
							</el-col>
						</el-row>
					</div>
					<div class="oneBottom">
						<div class="oneBottomBuleLeft">
							<div>
								<p class="blueTitle">OAO涉及系统介绍</p>
								<p class="blueTitle" style="line-height: 25px">
									{{ state.admin.info }}
								</p>
							</div>
						</div>
						<div class="oneBottomBuleRight">
							<p class="blueTitle">重要文件</p>
							<div class="blueTitleright">
								<span>{{
									state.d.file.split("\/").at(-1)
								}}</span>
								<div class="blueicon">
									<el-tooltip
										class="box-item"
										effect="dark"
										content="查看"
										placement="top-start">
										<div
											@click="
												dialogVisible=true
											"
										>
											<sc-icon>
												<sc-icon-See />
											</sc-icon>
										</div>
									</el-tooltip>
									<el-tooltip
										class="box-item"
										effect="dark"
										content="下载"
										placement="top-start"
									>
										<div
											class="icon2"
											@click="
												downloadFile(
													'http://oao.zhichengshangxin.com/' +
														state.d.file,
													state.d.file
												)
											"
										>
											<sc-icon>
												<sc-icon-Download />
											</sc-icon>
										</div>
									</el-tooltip>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<Scene :demand="demand" />
		</div>
		<div class="rightaaq">
			<Facility />
			<PT /> 	
			<Alarm />
		</div>
		<!-- 查看的对话框 -->
		<el-dialog
    v-model="dialogVisible"
    title="文件简介"
    width="30%">
    <span>{{state.d.text}}</span>
    <template #footer>
      <span class="dialog-footer">
        
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
	</div>
</template>

<script setup>
import FileSaver from "file-saver";
import Scene from "./Scene-demand.vue";
import Facility from "./facility.vue";
import PT from "./PT.vue";
import Alarm from "./Alarm-analysis.vue";
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { inuserput } from "@/api/model/login";
import { ProjectGroupone } from "@/api/model/echarts";
import { AdminInputs } from "../../api/model/admins";
// import func from '../../../vue-temp/vue-editor-bridge';
const route = useRoute();
let dialogVisible = ref(false)
let state = reactive({
	dat: {},
	a: {
		project_id: route.params.id || sessionStorage.getItem("proid"),
	},
	b: 1,
	d: {},
	admin:{start:'',cost:'',info:''},
	data1: [],
	data2: [],
	data3: [],
});
let demand = ref('')

onMounted(async () => {
	var id = route.params.id;

	// getdata();
	getsuerput();

	console.log(id, "oiiiiiiiiiiiiiii");
	getdatatop(state.a.project_id);
		// getdatacenter(id);
	getdatabottom(state.a.project_id);
	// if (id) {
	// 	console.log(id, "idddddddddddddddddddd");
	// 	sessionStorage.setItem("proid", id);
	// 	getdatatop(id);
	// 	// getdatacenter(id);
	// 	getdatabottom(id);
	// } else {
	// 	id = sessionStorage.getItem("proid");
	// 	getdatatop(id);
	// 	// getdatacenter(id);
	// 	getdatabottom(id);
	// }
	console.log("2222222222");
});
// function aaa(data) {
// 	window.open(data, "_blank");
// }

function downloadFile(data, name) {
	FileSaver.saveAs(data, name);
}
const getsuerput = async () => {
	let res = await inuserput();
	let res1 = await AdminInputs();
	let dt = JSON.parse(res1.data.info)
	state.admin.start = dt.StartTime
	state.admin.cost = dt.cost
	state.admin.info = dt.Describe
	// var id = route.params.id;
	// if (!id) {
		state.d = JSON.parse(res.data.info);
		demand.value = res.data.demand
		console.log(state.d);
	// }
};
const getdatatop = async (id) => {
	var res = await ProjectGroupone({
		indicatorName: "设备在线分析",
		firstType: "项目概述",
		secondType: "",
		type: "day",
		thirdType: "",
		dataType: "day",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		project_id: id,
	});
	var xlist = [];
	res.data.commonDailyDataList.forEach((item) => {
		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
		if (!xlist.includes(item.day)) {
			xlist.push(item.day);
		}
	});
	sessionStorage.setItem("daylist", JSON.stringify(xlist));
	var type1 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type1";
	});
	var type2 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type2";
	});
	var type3 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type3";
	});
	var data1 = [];
	var data2 = [];
	var data3 = [];
	type1.forEach((item) => {
		data1.push(item.number1);
	});
	type2.forEach((item) => {
		data2.push(item.number1);
	});
	type3.forEach((item) => {
		data3.push(item.number1);
	});
	sessionStorage.setItem("data1", JSON.stringify(data1));
	sessionStorage.setItem("data2", JSON.stringify(data2));
	sessionStorage.setItem("data3", JSON.stringify(data3));
};
const getdatabottom = async (id) => {
	var res = await ProjectGroupone({
		indicatorName: "数据健康度分析",
		firstType: "项目概述",
		secondType: "",
		type: "day",
		thirdType: "",
		dataType: "day",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		project_id: id,
	});
	var xlist = [];
	res.data.commonDailyDataList.forEach((item) => {
		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`;
		if (!xlist.includes(item.day)) {
			xlist.push(item.day);
		}
	});
	sessionStorage.setItem("daylist", JSON.stringify(xlist));
	var type1 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type1";
	});
	var type2 = res.data.commonDailyDataList.filter((item) => {
		return item.type == "type2";
	});
	var data1 = [];
	var data2 = [];
	type1.forEach((item) => {
		data1.push(item.number1);
	});
	type2.forEach((item) => {
		data2.push(item.number1);
	});
	sessionStorage.setItem("data1bot", JSON.stringify(data1));
	sessionStorage.setItem("data2bot", JSON.stringify(data2));
	console.log(res,'bottom')
};
// const getdata = async () => {
	// let res = await showcase(state.a);
	// console.log(res);
	// state.d.time = res.data.online_time;
	// state.d.address = res.data.city;
	// state.d.owner = res.data.owner;
	// state.d.name = res.data.project_name;
	// state.d.img = res.data.img;
	// state.d.name = res.data.project_name;
//   console.log(res.data);
// };
</script>

<style lang="less" scoped>
.blueicon {
	display: flex;
}
.info{
	display: flex;
	flex-wrap: wrap;
	width: 144%;
	font-size: 12px;

	li:nth-child(-n+2){
		width: 100%;
	}
	li:nth-child(n+3){
		width: 50%;
		white-space: nowrap;
	}
}
.all {
	width: 100%;
	height: 100%;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

ul {
	list-style: none;
}

.leftaaa {
	width: 30%;
	height: 100%;
}

.rightaaq {
	width: 70%;
	margin-left: 10px;
}

.leftTop {
	background-color: white;
	margin-bottom: 20px;
	width: 100%;
	border-style: none;
	border-color: unset;
	box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
	border-radius: 8px;
	font-size: 14px;
	padding: 0px;
	line-height: 20px;
	font-weight: normal;
	font-style: normal;

	.title {
		padding: 20px;

		.word {
			font-family: SourceHanSansSC;
			font-weight: 550;
			font-size: 20px;
			color: rgb(77, 98, 165);
			font-style: normal;
			letter-spacing: 2px;
			line-height: 28px;
			text-decoration: none;
		}
	}

	.line {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	.Onecontant {
		.oneMiddle {
			padding: 15px;

			img {
				display: block;
				width: 151px;
				height: 101px;
				float: right;
				border-radius: 8px;
			}

			ul {
				list-style: none;

				li {
					font-family: SourceHanSansSC;
					font-weight: 400;
					font-size: 14px;
					color: rgb(126, 126, 126);
					font-style: normal;
					letter-spacing: 0px;
					line-height: 20px;
					text-decoration: none;
				}
			}
		}
	}

	.oneBottom {
		width: 100%;
		padding: 0px 20px 15px 20px;
		display: flex;
		flex-direction: column;
		align-content: stretch;
		justify-content: space-around;

		.oneBottomBuleLeft {
			width: 100%;
			height: 215px;
			background-color: rgb(246, 250, 255);
			border-style: none;
			border-color: unset;
			border-radius: 4px;
			font-size: 14px;
			line-height: 20px;
			font-weight: normal;
			font-style: normal;

			.blueTitle {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 14px;
				color: rgba(127, 127, 127, 1);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 20px;
				text-decoration: none;
				padding: 10px;
			}

			ul {
				margin-bottom: 15px;
				margin-left: 10px;
			}

			li {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 14px;
				color: rgb(126, 126, 126);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 20px;
				text-decoration: none;
			}
		}

		.oneBottomBuleRight {
			margin-top: 10px;
			height: 222px;
			background-color: rgb(246, 250, 255);
			border-style: none;
			border-color: unset;
			border-radius: 4px;
			font-size: 14px;
			line-height: 20px;
			font-weight: normal;
			font-style: normal;

			.blueTitle {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 14px;
				color: rgba(127, 127, 127, 1);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 20px;
				text-decoration: none;
				padding: 10px;
			}

			.blueTitleright {
				width: 100%;
				// background-color: rgba(127, 255, 212, 0.536);
				display: flex;
				justify-content: space-between;
				padding: 0px 10px 0px 10px;
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 14px;
				color: rgb(126, 126, 126);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 20px;
				text-decoration: none;
				line-height: 20px;
			}

			ul {
				margin-bottom: 15px;
				margin-left: 10px;
			}

			li {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 14px;
				color: rgb(126, 126, 126);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 20px;
				text-decoration: none;
			}
		}
	}
}

/deep/.icon2 {
	margin-top: 4px;
}
</style>
<style>
.tooltip-base-box {
	width: 600px;
}

.tooltip-base-box .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tooltip-base-box .center {
	justify-content: center;
}

.tooltip-base-box .box-item {
	width: 110px;
	margin-top: 10px;
}
</style>
